<template>
  <div class="box">
		<Header title="企业评价"></Header>
		<div class="title">
			<p>云台山</p>
			<span>
				<van-rate
					v-model="value"
					:size="12"
					color="#FF0000"
					void-icon="star"
					void-color="#999999"
					readonly 
				/>
				4.9分
			</span>
			<i>景区</i>
		</div>
		<div class="tab-box">
			<span :class="{active:isChecked==index}" v-for="(value,index) in tabList" :key="index" @click="getTab(index)">{{value.name}}{{value.num}}</span>
		</div>
		<ul class="list-box">
			<li v-for="(item,row) in list" :key="row">
				<p>{{item.content}}<i :class="{green:item.tag=='好评',blue:item.tag=='中评',red:item.tag=='差评'}">{{item.tag}}</i></p>
				<span>{{item.time}}</span>
			</li>
		</ul>
	 	<Nav :Active="2"></Nav>
	</div>
</template>

<script>
import Header from "@/components/Header/Header.vue";
import Nav from "@/components/Nav/Nav.vue";
export default {
  name:'	Valuation',
	components: { Header, Nav },
	data(){
		return{
			value:4,
			isChecked:0,
			tabList:[{name:'全部',num:996},{name:'好评',num:760},{name:'中评',num:220},{name:'差评',num:16}],
			list:[
				{content:'俊秀的山，人还挺多的，去的晚了，中午才到达，错过好多风景。',tag:'好评',time:'2020-1-20 15:37'},{content:'俊秀的山，人还挺多的，去的晚了，中午才到达，错过好多风景。',tag:'好评',time:'2020-1-20 15:37'},{content:'俊秀的山，人还挺多的，去的晚了，中午才到达，中午才到达，错过好多风景。',tag:'中评',time:'2020-1-20 15:37'},{content:'俊秀的山，人还挺多的，去的晚了，中午才到达，错过好多风景。',tag:'中评',time:'2020-1-20 15:37'},{content:'俊秀的山，人还挺多的，去的晚了，中午才到达，错过好多风景。',tag:'好评',time:'2020-1-20 15:37'},{content:'俊秀的山，人还挺多的，去的晚了，中午才到达，错过好多风景。',tag:'好评',time:'2020-1-20 15:37'},{content:'俊秀的山，人还挺多的，去的晚了，中午才到达中午才到达，错过好多风景。',tag:'好评',time:'2020-1-20 15:37'},{content:'俊秀的山，人还挺多的，去的晚了错过好多风景，中午才到达，错过好多风景。',tag:'差评',time:'2020-1-20 15:37'},{content:'俊秀的山，人还挺多的，去的晚了，中午才到达，错过好多风景。',tag:'好评',time:'2020-1-20 15:37'},{content:'俊秀的山，人还挺多的，去的晚了错过好多风景，中午才到达，错过好多风景。',tag:'好评',time:'2020-1-20 15:37'},]
		}
	},
	methods:{
			getTab(index){
				this.isChecked=index
			}
	}
}
</script>

<style lang="less" scoped>
.title{
	height: 94/7.5vw;
	border-bottom: 1px solid #F2F2F2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	>p{
		font-size: 32/7.5vw;
	}
	>span{
		font-size: 28/7.5vw;
		color: #666;
	}
	>i{
		font-size: 28/7.5vw;
		color: #0FD2B2;
	}
}
.tab-box{
	margin:20/7.5vw 0;
	display: flex;
	justify-content: space-between;
	>span{
		display: block;
		width: 160/7.5vw;
		height: 60/7.5vw;
		border-radius: 6/7.5vw;
		border: 1px solid #999999;
		font-size: 28/7.5vw;
		color: #999999;
		text-align: center;
		line-height: 60/7.5vw;
		&.active{
			color: #0FD2B2;
			border: 1px solid #0FD2B2;
		}
	}
}
.list-box{
	height: 70vh;
	overflow-y: auto;
	li{
		padding-bottom: 10/7.5vw;
		border-bottom: 1px solid #f2f2f2;
		p{
			font-size: 28/7.5vw;
			line-height: 45/7.5vw;
			>i{
				padding:0 5/7.5vw;
				font-size: 24/7.5vw;
				border-radius: 4/7.5vw;
				&.green{
					border: 1px solid #42FF00;
					color: #42FF00;
				}
				&.blue{
					border: 1px solid #3BDCFF;
					color: #3BDCFF;
				}
				&.red{
					border: 1px solid #FF0000;
					color: #FF0000;
				}
			}
		}
		span{
			font-size: 24/7.5vw;
			color:#999999;
		}
	}
}
</style>